<template>
  <s-page custom-class="Button-Page">
    <div class="btn-group">
      <div class="title">自定义</div>
      <div class="btn-list">
        <s-button type="custom">自定义按钮</s-button>
        <s-button :custom-style="{ background: 'linear-gradient(193deg, #1CA7F7 0%, #5E79E5 100%)', color: 'white' }"
          >渐变色按纽</s-button
        >
        <s-button :custom-style="{ background: 'linear-gradient(to right, #ff6034, #ee0a24)', color: 'white' }"
          >渐变色按纽</s-button
        >
      </div>
    </div>
    <div class="btn-group">
      <div class="title">按钮类型</div>
      <div class="btn-list">
        <s-button>默认按钮</s-button>
        <s-button type="primary">主要按钮</s-button>
        <s-button type="info">信息按钮</s-button>
        <s-button type="success">成功按钮</s-button>
        <s-button type="warning">警告按钮</s-button>
        <s-button type="danger">危险按钮</s-button>
      </div>
    </div>
    <div class="btn-group">
      <div class="title">plain 镂空按钮</div>
      <div class="btn-list">
        <s-button plain>默认按钮</s-button>
        <s-button type="primary" plain>主要按钮</s-button>
        <s-button type="info" plain>信息按钮</s-button>
        <s-button type="success" plain>成功按钮</s-button>
        <s-button type="warning" plain>警告按钮</s-button>
        <s-button type="danger" plain>危险按钮</s-button>
      </div>
    </div>
    <div class="btn-group">
      <div class="title">细边框</div>
      <div class="btn-list">
        <s-button type="primary" plain hairline>细边框按钮</s-button>
        <s-button type="success" plain hairline>细边框按钮</s-button>
      </div>
    </div>
    <div class="btn-group">
      <div class="title">按钮形状</div>
      <div class="btn-list">
        <s-button type="primary" square>方形按钮</s-button>
        <s-button type="success" round>圆角按钮</s-button>
      </div>
    </div>
    <div class="btn-group">
      <div class="title">按钮大小</div>
      <div class="btn-list">
        <s-button type="primary">默认大小</s-button>
        <s-button type="primary" size="mini">迷你按钮</s-button>
        <s-button type="primary" size="small">小型按钮</s-button>
        <s-button type="primary" size="large">大号按钮</s-button>
      </div>
    </div>
    <div class="btn-group">
      <div class="title">block 块级按钮</div>
      <div class="btn-list">
        <s-button type="primary" block>块级按钮</s-button>
      </div>
    </div>
    <div class="btn-group">
      <div class="title">加载状态</div>
      <div class="btn-list">
        <s-button loading @click="handleClick">默认按钮</s-button>
        <s-button type="primary" loading>主要按钮</s-button>
        <s-button type="success" loading>成功按钮</s-button>
        <s-button type="primary" plain loading>主要按钮</s-button>
        <s-button type="danger" plain loading>信息按钮</s-button>
      </div>
    </div>
    <div class="btn-group">
      <div class="title">禁用按钮</div>
      <div class="btn-list">
        <s-button disabled @click="handleClick">默认按钮</s-button>
        <s-button type="primary" disabled>主要按钮</s-button>
        <s-button type="success" disabled>成功按钮</s-button>
        <s-button type="primary" plain disabled>主要按钮</s-button>
        <s-button type="danger" plain disabled>信息按钮</s-button>
      </div>
    </div>
  </s-page>
</template>

<script>
export default {
  methods: {
    handleClick(e) {
      console.log(e);
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #fff;
}
.Button-Page {
  padding: 30rpx;
  .btn-group {
    &:nth-child(n + 2) {
      margin-top: 20rpx;
    }
    .title {
      font-size: 28rpx;
      color: $tips-color;
    }
    .btn-list {
      margin-top: 20rpx;
    }
    ::v-deep {
      .s-button {
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        &-is-block,
        &-size-large {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
